
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
// const fs = require('fs')
const port = 7070
// chainWebpack方式 https://github.com/neutrinojs/webpack-chain#getting-started
module.exports = {
  publicPath: '/common-vue',
  devServer: {
    port
  },
  configureWebpack: {
    devtool: 'source-map'
  },
  // pages: {
  //   index: {
  //     // page 的入口
  //     entry: 'src/main.js',
  //     // 模板来源
  //     template: 'public/index.html',
  //     // 在 dist/index.html 的输出
  //     filename: 'index.html',
  //     // 当使用 title 选项时，
  //     // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
  //     title: 'Index Page',
  //     // 在这个页面中包含的块，默认情况下会包含
  //     // 提取出来的通用 chunk 和 vendor chunk。
  //     chunks: ['chunk-vendors', 'chunk-common', 'index']
  //   },
  //   myUser: {
  //     entry: 'src/pages/myUser/myUser.js',
  //     template: 'src/pages/myUser/myUser.html',
  //     filename: 'myUser.html',
  //     title: 'myUser111',
  //     chunks: ['chunk-vendors', 'chunk-common', 'myUser']
  //   }
  // },
  // webpack第一种配置方式
  // configureWebpack(config) {
  //   const env = process.env.NODE_ENV
  //   if (env === 'production') {
  //     config.name = '生产标题'
  //   } else {
  //     config.name = '测试标题'
  //   }
  // },
  // webpack第二种配置方式: 链式写法 更加灵活  推荐
  // svg-sprite-loader
  chainWebpack: config => {
    // 别名
    config.resolve.alias
      .set('@styles', path.resolve(__dirname, 'src/assets/styles'))
      .set('@images', path.resolve(__dirname, 'src/assets/images'))
      .set('@views', path.resolve(__dirname, 'src/views'))
      .set('@pages', path.resolve(__dirname, 'src/pages'))
      .set('@request', path.resolve(__dirname, 'src/request'))
      .set('@components', path.resolve(__dirname, 'src/components'))
      .set('@store', path.resolve(__dirname, 'src/store'))
      .set('@utils', path.resolve(__dirname, 'src/utils'))
      .set('@icons', path.resolve(__dirname, 'src/icons'))
      .set('@svg', path.resolve(__dirname, 'src/icons/svg'))
    // 处理svg, 删除默认,配置svg-sprite-loader
    // vue inspect --rules    vue inspect --rule svg
    const svgRule = config.module.rule('svg')
    svgRule.exclude.add(resolve('src/icons'))
    // 配置svg-sprite-loader
    // symbol: 这个<symbol>标记的作用是定义一个图像模板，你可以使用<use>标记实例化它，然后在SVG文档中反复使用，这种用法非常的高效。<symbol>本身不会输出任何图像，只有使用<use>实例化后才会显示。
    // mSvgIcons只是新定义rule起的名字,一个name而已,所以叫icons或者mSvgIcons都可以
    config.module.rule('icons')
      .test(/\.(svg)(\?.*)?$/)
      .include.add(resolve('src/icons')).end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })

    const env = process.env.NODE_ENV
    config.when(env === 'production', config => { // 部署环境
      config.devtool('cheap-module-source-map')
      // 去掉console代码
      config.optimization
        .minimizer('terser')
        .tap(args => {
          args[0].terserOptions.compress.drop_console = true
          return args
        })
      // 代码打包生成gz压缩文件
      const compressionPlugin = require('compression-webpack-plugin')
      config
        .plugin('compression')
        .use(compressionPlugin, [{
          test: /\.js$|\.css$|\.html$/,
          threshold: 10240 // 大于10KB的文件才会被压缩
        }])
      initCdn(config)

      // 分析工具
      // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
      // const bundleAnalyzerPlugin = new BundleAnalyzerPlugin()
      // config
      //   .plugin('bundleAnalyzer')
      //   .use(bundleAnalyzerPlugin)
      // fs.writeFileSync('./config.txt', config)
    },
    config => { // 开发环境
      console.log('=====', process.env.city)
      config.devtool('source-map')
      initMockApi(config)
    })
  }
}

// 设置cdn,降低打包之后vendor文件体积
function initCdn(config) {
  const externals = {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex'
  }
  config.externals(externals)

  const cdn = {
    css: [
      'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/theme-chalk/index.css'
    ],
    js: [
      'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
      'https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.3/vue-router.min.js',
      'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.2/vuex.min.js',
      'https://cdn.bootcdn.net/ajax/libs/axios/0.18.0/axios.min.js',
      'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/index.js'
    ]
  }
  config
    .plugin('html')
    .tap(args => {
      args[0].cdn = cdn
      return args
    })
}

// 设置接口mock数据
function initMockApi(config) {
  const appData = require('./public/mock/data.json')
  config.devServer
    .before(app => {
      app.get('/api/seller', (req, res) => {
        res.json(appData)
      })
    })
}

// configureWebpack方式
// module.exports = {
//   configureWebpack: config => {
//     const customAlias = initCustomAlias()
//     config.resolve.alias = { ...config.resolve.alias, ...customAlias } // 配置别名
//     if (process.env.NODE_ENV === 'production') { // 生产环境
//       config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
//       config.devtool = 'cheap-module-source-map'
//       const compressionPlugin = initCompressionPlugin()
//       config.plugins.push(compressionPlugin)
//     } else { // 开发环境
//       config.devtool = 'source-map'
//       fs.writeFileSync('./config.txt', JSON.stringify(config, null, 1))
//     }
//   }
// }

// function initCustomAlias() {
//   return {
//     '@styles': path.resolve(__dirname, 'src/assets/styles'),
//     '@images': path.resolve(__dirname, 'src/assets/images'),
//     '@img': path.resolve(__dirname, 'src/assets/img'),
//     '@pages': path.resolve(__dirname, 'src/pages'),
//     '@request': path.resolve(__dirname, 'src/request'),
//     '@components': path.resolve(__dirname, 'src/components')
//   }
// }

// function initCompressionPlugin() {
//   const CompressionPlugin = require('compression-webpack-plugin')
//   return new CompressionPlugin({
//     test: /\.js$|\.html$|\.css/,
//     threshold: 10240,
//     deleteOriginalAssets: false
//   })
// }
